<template>
  <div class="number_chart" id="number_chart" ref="numberContent">
    <a-spin :spinning="search_loading" style="height: 100%;">
        <div class="message">
          <div class="number-content">
            <span class="count" v-if="display.animated">
              <countTo :startVal='0' :endVal='numberCount' :duration='1000'></countTo>
            </span>
            <span class="count" v-else>
              {{ numberCount }}
            </span>
            <span class="unit" ref="unit">{{ display.unit }}</span>
          </div>
        </div>
    </a-spin>
  </div>
</template>

<script>
  import countTo from 'vue-count-to';
  import ElementResize from './elementResize';
  export default {
    props: ['item', 'title', 'remark', 'dataMapping', 'display', 'position', 'datasetList', 'search_loading'],
    data() {
      return {
        numberCount: 0,
        numberLoading: false
      }
    },
    components: {
      countTo,
      ElementResize
    },
    watch: {},
    computed: {},
    methods: {
      wait_data () {
        let datasetId = this.dataMapping.datasetId;
          if (!datasetId){
            this.numberCount = 0;
            return
          }
          if (!this.datasetList[datasetId]) {
            this.numberCount = 0;
            return
          }
          this.numberCount = 0;
          this.numberCount = this.datasetList[datasetId][0][this.dataMapping.value]*1;
      },
      initNumber () {
        this.$nextTick(() => {
          if (this.remark) {
            this.$refs.numberContent.style.height = 'calc(100% - 60px)';
          } else {
            this.$refs.numberContent.style.height = 'calc(100% - 40px)';
          }
          let cardWidth = this.$refs.numberContent&&this.$refs.numberContent.clientWidth;
          if (cardWidth > 500) {
            this.$refs.numberContent.style.fontSize = '60px'
            this.$refs.unit.style.fontSize = '38px'
          }
          if (cardWidth >= 400) {
            this.$refs.numberContent.style.fontSize = '46px'
            this.$refs.unit.style.fontSize = '30px'
          }
          if (cardWidth < 300) {
            this.$refs.numberContent.style.fontSize = '32px'
            this.$refs.unit.style.fontSize = '22px'
          }
          if (cardWidth <= 200) {
            this.$refs.numberContent.style.fontSize = '24px'
            this.$refs.unit.style.fontSize = '16px'
          }
          this.wait_data();
        })
      }
    },
    mounted() {
      this.initNumber()
      ElementResize.on(document.getElementById('number_chart'), () => {
        this.$nextTick(() => {
          this.initNumber();
        });
      });
    },
  }
</script>

<style scoped>
.number_chart {
  font-size: 24px;
  width: 100%;
  height: 100%;
  /* height: calc(100% - 60px); */
  display: flex;
  flex-direction: column;
}

.message {
  height: 100%;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.title {
  font-size: 18px;
  line-height: 28px;
  color: #666;
}

.remark {
  font-size: 14px;
  color: #999;
  line-height: 24px;
}

.count {
  font-weight: 600;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.unit {
  font-size: 18px;
  color: #555;
  align-self: flex-end;
}

.ant-spin-nested-loading {
  height: 100%;
}

.ant-spin-nested-loading>>>.ant-spin-container {
  height: 100%;
}

.number-content {
  position: relative;
  width: 100%;
  height: 100%;
}

.number-content .unit {
  position: absolute;
  bottom: 5%;
  right: 5%;
}
</style>